<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Flow Example</title>
  <link rel="stylesheet" href="https://unpkg.com/react-flow-renderer/dist/style.css" />
  <style>
    body {
      background-color: #1a1a1a;
      color: #ffffff;
      font-family: Arial, sans-serif;
    }
    #root {
      width: 800px;
      height: 600px;
      border: 1px solid #444;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <div id="root"></div>

  <!-- 引入 React 和 React DOM -->
  <script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>

  <!-- 引入 Babel 用于编译 JSX -->
  <script src="https://cdn.jsdelivr.net/npm/babel-standalone@6/babel.min.js"></script>

  <!-- 引入 React Flow 相关依赖 -->
  <script src="https://cdn.jsdelivr.net/npm/reactflow@11.11.4/dist/umd/index.min.js"></script>

  <script type="text/babel">
    // 确保 React 和 ReactDOM 已加载
    if (window.React && window.ReactDOM) {
      const { createRoot } = window.ReactDOM;
      const { ReactFlow, addEdge, removeElements, Controls, Background, MiniMap } = window.ReactFlow;

      // 创建根元素
      const root = createRoot(document.getElementById('root'));

      // 初始化节点
      const initialNodes = [
        { id: '1', position: { x: 250, y: 5 }, data: { label: '开始' }, type: 'input' },
        { id: '2', position: { x: 100, y: 100 }, data: { label: '判断' }, type: 'default' },
        { id: '3', position: { x: 400, y: 100 }, data: { label: '分支1' }, type: 'default' },
        { id: '4', position: { x: 250, y: 200 }, data: { label: '结束' }, type: 'output' }
      ];

      // 初始化边
      const initialEdges = [
        { id: 'e1-2', source: '1', target: '2' },
        { id: 'e2-3', source: '2', target: '3' },
        { id: 'e3-4', source: '3', target: '4' }
      ];

      // 处理节点变化
      function applyNodeChanges(changes, nodes) {
        return changes.reduce((acc, change) => {
          if (change.type === 'add') {
            acc.push(change.node);
          } else if (change.type === 'remove') {
            acc = acc.filter(node => node.id !== change.id);
          } else if (change.type === 'update') {
            acc = acc.map(node => (node.id === change.id ? { ...node, ...change.data } : node));
          }
          return acc;
        }, nodes);
      }

      // 处理边变化
      function applyEdgeChanges(changes, edges) {
        return changes.reduce((acc, change) => {
          if (change.type === 'add') {
            acc.push(change.edge);
          } else if (change.type === 'remove') {
            acc = acc.filter(edge => edge.id !== change.id);
          } else if (change.type === 'update') {
            acc = acc.map(edge => (edge.id === change.id ? { ...edge, ...change.data } : edge));
          }
          return acc;
        }, edges);
      }

      // React 组件
      const App = () => {
        const [nodes, setNodes] = React.useState(initialNodes);
        const [edges, setEdges] = React.useState(initialEdges);

        const onNodesChange = (changes) => setNodes((nds) => applyNodeChanges(changes, nds));
        const onEdgesChange = (changes) => setEdges((eds) => applyEdgeChanges(changes, eds));
        const onConnect = (connection) => setEdges((eds) => addEdge(connection, eds));

        return (
          <ReactFlow
            nodes={nodes}
            edges={edges}
            onNodesChange={onNodesChange}
            onEdgesChange={onEdgesChange}
            onConnect={onConnect}
            fitView
          >
            <Controls />
            <MiniMap />
            <Background variant="dots" gap={12} size={1} />
          </ReactFlow>
        );
      };

      // 渲染应用
      root.render(<App />);
    } else {
      console.error('React or ReactDOM is not loaded.');
    }
  </script>
</body>
</html>